<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.contain {
  background-color: #a0c9f5;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.formContain {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 10px 26px 0 10px;
  border-radius: 10px;
}
.inputBorder {
  border-radius: 32px;
}
.codeContain {
  display: flex;
}
.leftContain {
  flex: 1;
}
.rightContain {
  flex: 1;
  height: 33px;
  overflow: hidden;
  border-radius: 4px;
}
.imgShow {
  width: 100%;
  height: 33px;
  cursor: pointer;
}

</style>
<template>
  <div class="contain">
    <!-- 登录窗口 -->
    <div class="formContain">
      <div style="text-align:center;">
        <h2>机器瞄</h2> </div>
      <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="50" style="margin:auto;">
        <FormItem label="账号" prop="username">
          <Input type="text" v-model="formCustom.username" placeholder="账号" class="inputBorder"></Input>
        </FormItem>
        <FormItem label="密码" prop="password">
          <Input type="password" v-model="formCustom.password" placeholder="密码" class="inputBorder"></Input>
        </FormItem>
        <FormItem label="验证码" prop="verification">
          <div class="codeContain">
            <div class="leftContain">
              <Input type="text" v-model="formCustom.verification" placeholder="验证码" class="inputBorder"></Input>
            </div>
            <div class="rightContain"> <img v-show="hasValidatorImg" @click="get_kaptcha()" src="" id="id_verification" alt="" class="imgShow">
              <Button v-show="!hasValidatorImg" type="default" loading @click="get_kaptcha()" class="imgShow"></Button>
            </div>
          </div>
        </FormItem>
        <FormItem>
          <Button type="primary" shape="circle" @click="handleSubmit('formCustom')" style="width:300px;">登录</Button>
        </FormItem>
      </Form>
    </div>
    <!-- 粒子 -->
    <!--<vue-particles color="#2d8cf0" :particleOpacity="0.7" :particlesNumber="80" shapeType="star" :particleSize="4" linesColor="#2d8cf0" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="repulse"> </vue-particles>-->
  </div>
</template>
<script>
export default {
  data: function () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入登录密码！'))
      } else {
        if (this.formCustom.username !== '') {
          this.$refs.formCustom.validateField('username')
        }
        callback()
      }
    }
    const validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名！'))
      } else {
        callback()
      }
    }
    const validateImg = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码！'))
      } else {
        callback()
      }
    }
    return {
      formCustom: {
        password: '' ,
        username: '',
        verification: ''
      },
      ruleCustom: {
        password: [{ validator: validatePass, trigger: 'blur' }, { validator: validatePass, trigger: 'change' }],
        username: [{ validator: validateName, trigger: 'blur' }, { validator: validateName, trigger: 'change' }],
        verification: [{ validator: validateImg, trigger: 'blur' }, { validator: validateImg, trigger: 'change' }]
      },
      hasValidatorImg: false
    }
  },
  created: function () {
    // console.log('--created--')
  },
  mounted: function () {
    let self = this
    self.get_kaptcha()
    self.enterListen()
  },
  destroyed: function () {
    document.onkeydown = null
  },
  methods: {
    handleSubmit: function (name) {
      let self = this
      self.$refs[name].validate((valid) => {
        if (valid) {
          self.post_login()
        } else {
          self.$Message.error('Fail!')
        }
      })
    },
    handleReset: function (name) {
      this.$refs[name].resetFields()
    },
    // 获取验证码
    get_kaptcha: function () {
      let self = this
      self.hasValidatorImg = false
      window.myapi.kaptcha().then(function (res) {
        if (res.status === 200) {
          document.getElementById('id_verification').src = window.URL.createObjectURL(res.data)
          self.hasValidatorImg = true
        } else {
          self.hasValidatorImg = false
        }
      }).catch(function (e) {
        console.log(e)
      })
    },
    // 登录
    post_login: function () {
      let self = this
      // let postData = self.formCustom
      let postData = {
        username: self.formCustom.username,
        password: self.formCustom.password,
        verification: self.formCustom.verification
      }
      window.myapi.login(postData).then(function (res) {
        if (res.data.status === 200) {
          self.goPage()
          self.$Message.success('Success!')
        } else {
          let msg = res.data.msg ? res.data.msg : '登录失败！'
          self.$Message.error({
            content: msg,
            duration: 2
          })
          self.get_kaptcha()
          self.handleReset('formCustom')
        }
      }).catch(function (e) {
        if (e.message) {
          self.$Message.error({
            content: e.message,
            duration: 2
          })
        }
        self.get_kaptcha()
        self.handleReset('formCustom')
      })
    },
    // 跳转页面
    goPage: function () {
      let self = this
      self.$router.push({ path: '/home/dashboard' })
    },
    // enter键
    enterListen: function () {
      let self = this
      document.onkeydown = function (event) {
        var e = event || window.event
        if (e && e.keyCode === 13) {
          // 回车键的键值为13
          // 调用登录按钮的登录事件
          self.handleSubmit('formCustom')
        }
      }
    }
  }
}
/* (粒子参数设置)
color: String类型。默认'#dedede'。粒子颜色。
particleOpacity: Number类型。默认0.7。粒子透明度。
particlesNumber: Number类型。默认80。粒子数量。
shapeType: String类型。默认'circle'。可用的粒子外观类型有："circle","edge","triangle", "polygon","star"。
particleSize: Number类型。默认80。单个粒子大小。
linesColor: String类型。默认'#dedede'。线条颜色。
linesWidth: Number类型。默认1。线条宽度。
lineLinked: 布尔类型。默认true。连接线是否可用。
lineOpacity: Number类型。默认0.4。线条透明度。
linesDistance: Number类型。默认150。线条距离。
moveSpeed: Number类型。默认3。粒子运动速度。
hoverEffect: 布尔类型。默认true。是否有hover特效。
hoverMode: String类型。默认true。可用的hover模式有: "grab", "repulse", "bubble"。
clickEffect: 布尔类型。默认true。是否有click特效。
clickMode: String类型。默认true。可用的click模式有: "push", "remove", "repulse", "bubble" */

</script>
